/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Image,
  ScrollView
} from 'react-native';
 //  组件
import TabNavigator from 'react-native-tab-navigator'
import HomeView from './components/tabbars/Home.js'
import Me from './components/tabbars/Me.js'
import Search from './components/tabbars/Search.js'
import ShopCar from './components/tabbars/ShopCar.js'

import Icon from 'react-native-vector-icons/FontAwesome'

export default class App extends Component<{}> {
  constructor(props){
    super(props)
    this.state = {
      selectedTab:'home'
    }
  }

  render() {
    return (
      <View style={styles.container}>
           <TabNavigator>

              <TabNavigator.Item title="Home"
                  selected = {this.state.selectedTab === 'home'}
                  onPress = {()=>{this.setState({selectedTab:'home'})}}
                  renderIcon={() => <Icon name="home" size={25} color="gray" />} // 未选中状态下，展示的图标
          renderSelectedIcon={() => <Icon name="home" size={25} color="#0079FF" />} // 选中状态下展示的图标
                >
                  <HomeView></HomeView>
              </TabNavigator.Item>



              <TabNavigator.Item title="购物车"
                  selected = {this.state.selectedTab === 'shopCar'}
                  onPress = {()=>{this.setState({selectedTab:'shopCar'})}}
                  renderIcon={() => <Icon name="shopping-cart" size={25} color="gray" />}
            renderSelectedIcon={() => <Icon name="shopping-cart" size={25} color="#0079FF" />}
                  badgeText  = "0"
                >
                    <Search></Search>
              </TabNavigator.Item>

              <TabNavigator.Item title="搜索"
                    selected = {this.state.selectedTab === 'search'}
                        onPress = {()=>{this.setState({selectedTab:'search'})}}
                        renderIcon={() => <Icon name="search" size={25} color="gray" />}
            renderSelectedIcon={() => <Icon name="search" size={25} color="#0079FF" />}
                >
                  <ShopCar></ShopCar>
              </TabNavigator.Item>

              <TabNavigator.Item title="Me"
                      selected = {this.state.selectedTab === 'me'}
                        onPress = {()=>{this.setState({selectedTab:'me'})}}
                        renderIcon={() => <Icon name="user" size={25} color="red" />}
            renderSelectedIcon={() => <Icon name="user-o" size={25} color="#0079FF" />}
                  >
                    <Me></Me>
              </TabNavigator.Item>

           </TabNavigator>

      </View>
    );
  }

}

const styles = StyleSheet.create({
container:{
  flex:1
}
});
